<template>
  <div class="data-collect">
    <div class="header-filter">
      <span class="filter-text">数据获取方式: </span>
      <el-radio-group v-model="dataCollectRadio" size="mini">
        <el-radio-button :label="0">从源码中获取数据</el-radio-button>
        <el-radio-button :label="1">生成固定格式的数据</el-radio-button>
        <el-radio-button :label="2">已有标签组合</el-radio-button>
      </el-radio-group>
    </div>
    <div class="setting-card">
      <div class="card-header">数据获取</div>
      <div class="card-body">
        <div class="source-collect" v-if="dataCollectRadio === 0">
          <el-form label-width="100">
            <el-form-item label="数据来源:">
              <el-select size="mini">
                <el-option :value="0" label="从默认页"></el-option>
                <el-option :value="1" label="默认页和内容分页源码"></el-option>
                <el-option :value="2" label="关联多页"></el-option>
              </el-select>
              <el-select size="mini">
                <el-option :value="0" label="源码中"></el-option>
                <el-option :value="1" label="网址地址中"></el-option>
                <el-option :value="2" label="返回的头信息中"></el-option>
              </el-select>
              <el-select size="mini">
                <el-option :value="0" label="+添加新多页+"></el-option>
              </el-select>
              <el-checkbox class="loop-check" label="循环匹配"></el-checkbox>
              <icon-tip placement="top" content="当需要采集同样格式的多条数据时, 可以使用循环匹配" eleIcon="el-icon-info"></icon-tip>
            </el-form-item>
            <el-form-item label="提取方式:">
              <el-radio-group v-model="extractRadio" size="mini">
                <el-radio-button :label="0">前后截取</el-radio-button>
                <el-radio-button :label="1">正则提取</el-radio-button>
                <el-radio-button :label="2">正文提取</el-radio-button>
                <el-radio-button :label="3">XPath提取</el-radio-button>
                <el-radio-button :label="4">JSON提取</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <!-- 前后截取 -->
          <el-row v-if="extractRadio === 0" :gutter="10">
            <el-col :span="12">
              <div>
                <span>开头字符串: </span>
                <el-button type="text">(*)</el-button>
              </div>
              <el-input type="textarea" resize="none" :rows="6"></el-input>
            </el-col>
            <el-col :span="12">
              <div class="header">
                <span>结尾字符串: </span>
                <el-button type="text">(*)</el-button>
              </div>
              <el-input type="textarea" resize="none" :rows="6"></el-input>
            </el-col>
          </el-row>
          <!-- 正则提取 -->
          <el-row v-if="extractRadio === 1" :gutter="10">
            <el-col :span="12">
              <div>
                <span>匹配内容: </span>
                <el-button type="text">[参数]</el-button>
                <el-button type="text">(*)</el-button>
                <el-button type="text">(?&#60;content&#62;?)</el-button>
              </div>
              <el-input type="textarea" resize="none" :rows="6"></el-input>
            </el-col>
            <el-col :span="12">
              <div class="header">
                <span>组合结果: </span>
                <el-button type="text">[参数1]</el-button>
                <el-button type="text">[参数2]</el-button>
                <el-button type="text">[参数N]</el-button>
              </div>
              <el-input type="textarea" resize="none" :rows="6"></el-input>
            </el-col>
          </el-row>
          <!-- 正文提取 -->
          <div v-if="extractRadio === 2">
            <small-tip v-slot:content>该功能适合拥有大段文字内容类数据的提取, 过滤链接内容为排除内容里面的a标签</small-tip>
            <el-form label-width="100px">
              <el-form-item label="提取数据字段:">
                <el-radio-group size="mini">
                  <el-radio-button :label="0">文章标题</el-radio-button>
                  <el-radio-button :label="1">文章内容</el-radio-button>
                  <el-radio-button :label="2">发布时间</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="包含多段内容:">
                <el-switch></el-switch>
              </el-form-item>
              <el-form-item label="过滤链接内容:">
                <el-switch></el-switch>
              </el-form-item>
            </el-form>
          </div>
          <!-- XPath提取 -->
          <div v-if="extractRadio === 3">
            <small-tip v-slot:content>
              XPath 是一门在 HTML/XML 文档中查找信息的语言. 详情请参考 <a href="http://www.w3school.com.cn/xpath/xpath_intro.asp" target="_blank">XPath教程</a>.<br/>
              可以通过FireFox firebug或者Chrome开发者工具快速获取
            </small-tip>
            <el-form :inline="true" class="xpath-form">
              <el-form-item label="XPath:">
                <el-input type="textarea" style="width: 500px;" resize="none" :rows="4"></el-input>
              </el-form-item>
              <el-form-item label="节点属性:">
                <el-select size="mini">
                  <el-option label="InnerHtml" :value="0"></el-option>
                  <el-option label="InnerText" :value="1"></el-option>
                  <el-option label="OuterHtml" :value="2"></el-option>
                  <el-option label="Href" :value="3"></el-option>
                  <el-option label="Value" :value="4"></el-option>
                  <el-option label="Src" :value="5"></el-option>
                  <el-option label="TextContent" :value="6"></el-option>
                  <el-option label="Name" :value="7"></el-option>
                  <el-option label="Id" :value="8"></el-option>
                  <el-option label="Class" :value="9"></el-option>
                  <el-option label="Style" :value="10"></el-option>
                  <el-option label="Width" :value="11"></el-option>
                  <el-option label="Height" :value="12"></el-option>
                  <el-option label="Alt" :value="13"></el-option>
                  <el-option label="Action" :value="14"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!-- JSON提取 -->
          <div v-if="extractRadio === 4">
            <small-tip v-slot:content>
              JSON语句是一种自定义在JSON文档中查找信息的语言<br/>
              更详细的介绍请参考 <a href="http://www.locoy.com/index/guide#JSON%E6%8F%90%E5%8F%96.html" target="_blank">JSON提取</a>
            </small-tip>
            <el-form label-width="100px">
              <el-form-item label="JSON表达式:">
                <el-input size="mini" class="json-input"></el-input>
                <el-button type="primary" size="mini">JSON工具</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="fixed-format" v-if="dataCollectRadio === 1">
          <div class="fixed-label">选择生成数据的格式:</div>
          <el-radio-group class="fixed-format-radio" v-model="fixedFormatRadio" size="mini">
            <el-radio-button :label="0">固定的字符串</el-radio-button>
            <el-radio-button :label="1">系统时间</el-radio-button>
            <el-radio-button :label="2">随机字符串</el-radio-button>
            <el-radio-button :label="3">随机数字</el-radio-button>
            <el-radio-button :label="4">系统时间戳</el-radio-button>
            <el-radio-button :label="5">随机抽取信息</el-radio-button>
          </el-radio-group>
          <div class="fixed-setting" v-if="fixedFormatRadio === 0">
            <span class="fixed-label">字符串:</span>
            <el-input class="fixed-input" type="textarea" resize="none" :rows="8" />
          </div>
          <div class="fixed-setting fixed-string" v-if="fixedFormatRadio === 1">
            <span class="fixed-label">请选择一种时间格式:</span>
            <el-input v-model="timeFormatInput" size="mini" class="fixed-input"></el-input>
            <el-dropdown trigger="click" @command="handleCommand">
              <el-button circle icon="el-icon-edit" size="mini"></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="yyyy-MM-dd HH:mm:ss">2019-11-11 11:11:11</el-dropdown-item>
                <el-dropdown-item command="yyyy-MM-dd HH:mm">2019-11-11 11:11</el-dropdown-item>
                <el-dropdown-item command="yyyy-MM">11-11</el-dropdown-item>
                <el-dropdown-item command="yyyy年MM月dd日">2019年11月11日</el-dropdown-item>
                <el-dropdown-item command="yyyy年MM月dd日 HH时mm分ss秒">2019年11月11日 11时11分11秒</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="fixed-setting fixed-string" v-if="fixedFormatRadio === 2">
            <span class="fixed-label">原字符库:</span>
            <el-input class="fixed-input" size="mini"></el-input>
            <span class="fixed-label">长度:</span>
            <el-input-number class="fixed-num" size="mini" :controls="false"></el-input-number>
          </div>
          <div class="fixed-setting fixed-string" v-if="fixedFormatRadio === 3">
            <span class="fixed-label">范围:</span>
            <span>从</span>
            <el-input-number class="fixed-num" size="mini" :controls="false"></el-input-number>
            <span>到</span>
            <el-input-number class="fixed-num" size="mini" :controls="false"></el-input-number>
          </div>
          <div class="fixed-setting fixed-string" v-if="fixedFormatRadio === 4">
            <small-tip v-slot:content>指1970年1月1日到当前时间过去的秒数, 在PHP+MySQL里常用</small-tip>
          </div>
          <div class="fixed-setting" v-if="fixedFormatRadio === 5">
            <el-input type="textarea" class="fixed-input" rows="8" resize="none"></el-input>
            <div class="fixed-tips">
              从已定义的值中随机抽取<br/>
              一个一行一条内容信息<br/>
              比如作者标签为:<br/>
              作者一<br/>
              作者二<br/>
              作者三<br/>
              作者四
            </div>
          </div>
        </div>
        <div class="tags-combination" v-if="dataCollectRadio === 2">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="tags-block">
                <div class="tags-header">
                  标签组合数据:
                </div>
                <el-input class="tags-input" type="textarea" :rows="10" resize="none" placeholder="这里可填写任意组合 普通文字+[标签:XXX]"></el-input>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="tags-block">
                <div class="tags-header">
                  可选标签:
                </div>
                <div class="tags-list">
                  <div class="tags-item">标题</div>
                  <div class="tags-item">价格</div>
                  <div class="tags-item">面积</div>
                  <div class="tags-item">装修类型</div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <el-checkbox label="循环组合"></el-checkbox>
              <div>当组合标签中含有循环标签时, 可以对于每一次匹配进行循环组合</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SmallTip from '@/components/SmallTip.vue'
import IconTip from '@/components/IconTip.vue'
export default {
  name: 'DataCollect',
  components: {
    IconTip,
    SmallTip
  },
  data () {
    return {
      dataCollectRadio: 2,
      extractRadio: 4,
      fixedFormatRadio: 1,
      timeFormatInput: ''
    }
  },
  methods: {
    handleCommand (command) {
      this.timeFormatInput = command
    }
  }
}
</script>
<style lang="scss">
.el-select-dropdown,
.el-dialog__wrapper,
.el-tooltip__popper,
.el-dropdown-menu {
  z-index: 9999 !important;
}
.v-modal {
  z-index: 9998 !important;
}
.data-collect {
  padding: 20px 20px 0;
  .filter-text {
    margin-right: 20px;
  }
  .setting-card {
    margin-top: 10px;
    border: 1px solid #dfdfdf;
    .card-header {
      padding: 5px 20px;
      border-bottom: 1px solid #ebeef5;
      .card-header-filter {
        margin-left: 20px;
      }
    }
    .card-body {
      height: 305px;
      padding: 10px;
      .loop-check {
        margin-left: 20px;
      }
      .xpath-form {
        margin-top: 20px;
      }
      .json-input {
        width: 80%;
      }
      .fixed-format {
        .fixed-format-radio {
          padding: 10px 0;
        }
        .fixed-setting {
          display: flex;
          padding: 10px 20px;
          &.fixed-string {
            align-items: center;
          }
          .fixed-label {
            margin: 0 10px;
          }
          .fixed-input {
            width: 50%;
            // margin: 0 20px;
          }
          .fixed-num {
            width: 50px;
            // margin: 0 20px;
          }
          .fixed-tips {
            margin-left: 10px;
          }
        }
      }
      .tags-combination {
        .tags-block {
          height: 250px;
          border: 1px solid #dfdfdf;
          .tags-input {
            height: 100%;
          }
          .tags-header {
            padding: 5px 20px;
            border-bottom: 1px solid #ebeef5;
          }
          .tags-list {
            height: 220px;
            overflow-y: auto;
            .tags-item {
              padding: 5px;
              cursor: pointer;
              &:hover {
                background: #dfdfdf;
              }
              &.active {
                background: #fedf7b;
              }
            }
          }
        }
      }
    }
  }
}
</style>
